<ion-header [translucent]="true">
    <ion-toolbar>
        <ion-buttons slot="primary">
            <ion-button fill="clear" color="medium" (click)="dismiss()">
                <ion-icon name="close-outline" slot="icon-only"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title>
            {{translate("CONNECT_DEVICE")}}
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-header collapse="condense">
        <ion-toolbar>
            <ion-title size="large">{{translate("CONNECT_DEVICE")}}</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-button expand="full" fill="clear" color="primary" *ngIf="!isBluetoothEnabled" (click)="enableBluetooth()">
        {{translate("ENABLE_BLUETOOTH")}}
    </ion-button>

    <ion-button expand="full" fill="clear" color="primary" *ngIf="connectedDevice.id" disabled>
        {{translate("CONNECTED_TO")}}{{connectedDevice.name}}
    </ion-button>

    <ion-list>
        <ion-item button detail *ngFor="let device of devices" (click)="connect(device)">
            <ion-label>
                {{device.name}}
            </ion-label>
        </ion-item>
    </ion-list>



</ion-content>